forum

Home / DeveloperSection / Forums / How to use WebGrid in mvc

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

Sure, here are the steps on how to use WebGrid in MVC:

  1. Add the Web Grid library to your ASP.NET project.
  2. Create a view that will display the Web Grid.
  3. In the view, use the Web Grid to display the data.
  4. Bind the Web Grid to a model.

Here is an example of the code:

HTML

@{
    // Get the data for the Web Grid
    var data = GetData();
}

<html>
<head>
    <title>Web Grid</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-webgrid/4.0.5/webgrid.min.js"></script>
</head>
<body>
    <h1>Web Grid</h1>

    <div id="web-grid">
    </div>

    <script>
    $(document).ready(function() {
        // Create the Web Grid
        var webGrid = $("#web-grid").webGrid({
            dataSource: data
        });
    });
    </script>
</body>
</html>

This code will add the Web Grid library to your ASP.NET project. The GetData function will get the data for the Web Grid. The web-grid element will be used to create the Web Grid. The dataSource attribute of the web-grid element will be bound to the data returned by the GetData function.

The web-grid element will be bound to the webGrid method of the Web Grid library. The webGrid method will handle the events of the Web Grid.

Here are some of the features of WebGrid:

  • Paging: WebGrid can be paginated to display a limited number of records at a time.
  • Sorting: WebGrid can be sorted by any column.
  • Filtering: WebGrid can be filtered to display only the records that match the specified criteria.
  • Editing: WebGrid can be used to edit the data in the grid.
  • Deleting: WebGrid can be used to delete the data in the grid.
Anonymous User

Anonymous User

25-Dec-2015

WebGrid is most powerful tools to list records from database in web application. Like ASP.NET Web Forms GridView, DataList, ASP.NET MVC didn't had any built in data controls. WebGrid that does almost all work of ASP.NET Web Form GridView and it is simple enough too.

Index.cshtml

@model IList<ForumMVC.Employee>
@{
    ViewBag.Title = "Index";
}
 @{  
var grid = new WebGrid(Model); 
}
<h1>Employee List </h1> 
<div id="grid"> 
@grid.GetHtml()
</div> 
 
HomeController 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; 
using ForumMVC;
using System.Data.Entity;
namespace ForumMVC.Controllers
{
    public class HomeController : Controller
    {
        forumEntities db = new forumEntities();
        public ActionResult Index()
        {
            List<Employee> Emplst = db.Employee.ToList();
            return View(Emplst);
        }
    }
}

answer 415872512094234

MindStick Training

Liked By